<template>
  <div class="bar" id="bar">
    <!-- <img :src="require('@/assets/big-screen.jpg')" alt=""> -->
  </div>
</template>

<script>
import axios from 'axios'
import * as echarts from 'echarts'
import CQ from './cq.json'
import alias from './alias'

export default {
  name: 'Bar',
  props: {
    barData: {
      type: Array,
      required: true,
      default: () => [],
    },
    names: {
      type: Array,
      required: true,
      default: () => [],
    },
  },
  components: {},
  data() {
    return {}
  },
  mounted() {
    console.log('mounted-bar', this.barData)
    this.barData.length && this.init()
  },
  watch: {
    barData: function () {
      this.barData.length && this.init()
    },
  },
  methods: {
    init() {
      console.log('init-bar', this.barData)
      var chartDom = document.getElementById('bar')
      var myChart = echarts.init(chartDom)
      var option

      const data = this.barData
      const names = this.names

      // data.sort(function (a, b) {
      //   return a.value - b.value
      // })

      // const data = [...this.barData]
      const barOption = {
        baseOption: {
          // timeline: {
          //   axisType: 'category',
          //   // realtime: false,
          //   // loop: false,
          //   autoPlay: false,
          //   // currentIndex: 2,
          //   playInterval: 1000,
          //   // controlStyle: {
          //   //     position: 'left'
          //   // },
          //   data: [
          //     '2002-01-01',
          //     '2003-01-01',
          //     '2004-01-01',
          //     {
          //       value: '2005-01-01',
          //       tooltip: {
          //         formatter: '{b} GDP达到一个高度',
          //       },
          //       symbol: 'diamond',
          //       symbolSize: 16,
          //     },
          //     '2006-01-01',
          //     '2007-01-01',
          //     '2008-01-01',
          //     '2009-01-01',
          //     '2010-01-01',
          //     {
          //       value: '2011-01-01',
          //       tooltip: {
          //         formatter: function (params) {
          //           return params.name + 'GDP达到又一个高度'
          //         },
          //       },
          //       symbol: 'diamond',
          //       symbolSize: 18,
          //     },
          //   ],
          //   label: {
          //     formatter: function (s) {
          //       return new Date(s).getFullYear()
          //     },
          //   },
          // },
          legend: {
            left: 'right',
            textStyle: {
              color: '#fff',
            },
            padding: 30,
            data: data.map((item) => {
              return item.label
            }),
            selected: {
              // GDP: false,
              // 金融: false,
              // 房地产: false,
            },
          },
          xAxis: {
            type: 'value',
          },
          yAxis: {
            type: 'category',
            axisLabel: {
              rotate: 30,
              color: '#fff',
            },
            data: names,
          },
          animationDurationUpdate: 1000,
          series: data.map((item) => {
            return {
              name: item.label,
              type: 'bar',
              label: {
                // 添加这个配置来显示数值
                show: true,
                position: 'right', // 数值显示在柱子右侧
                color: '#fff', // 数值颜色
                formatter: '{c}', // 显示原始数据值
              },
              data: item.value,
            }
          }),
        },
        options: [
          // {
          //   title: { text: '2002耕地保护', textStyle: { color: '#fff' } },
          //   series: [
          //     {
          //       data: data.map(function (item) {
          //         return item.value
          //       }),
          //     },
          //     {
          //       data: data.map(function (item) {
          //         return item.value
          //       }),
          //     },
          //     // {
          //     //   data: data.map(function (item) {
          //     //     return item.value
          //     //   }),
          //     // },
          //     // {
          //     //   data: data.map(function (item) {
          //     //     return item.value
          //     //   }),
          //     // },
          //     // {
          //     //   data: data.map(function (item) {
          //     //     return item.value
          //     //   }),
          //     // },
          //   ],
          // },
        ],
      }
      console.log('barOption', barOption)
      myChart.setOption(barOption)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    },
  },
}
</script>

<style lang="less" scoped>
.bar {
  width: 100%;
  height: 100%;
}
</style>
